<template>
	<view class="news">
		<!-- 应用列表页 - 总页面tabbar - 十分区 -->
		<u-navbar :is-back="flase" :border-bottom="flase" title="OA应用" title-color="#fff" :title-size="40"></u-navbar>
		<view class="content">
			<template v-if="data.length==0">
				<view class="empty">
					<u-empty text="应用列表为空" mode="list" v-show="show"></u-empty>
				</view>
			</template>
			<template v-else>
				<view class="content_box">
					<view class="ywsp" v-for="(item,index) in list" :key="index">
						<view class="padding">
							<u-section :title="item.title" :right="false" :bold="false" color="#c8c9cc"></u-section>
						</view>
						<view class="flex w1">
							<view class="ywsp_box content_box" v-for="(items,indexs) in item.children" :key="indexs"
								@click="goPage(items)">
								<view class="badge" v-if="items.total">
									{{items.total}}
								</view>
								<image :src="'https://' + items.icon" class="img2" mode="widthFix"></image>
								<view style="font-size: 30rpx;">{{items.title}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				total: "",
				icon: "",
				title: '',
				children: [],
				isDisabled: true, //控制搜索按钮的禁用与否
				isShowList: true, //控制搜索为空时的显示模块
				keyWord: '', //输入框的值
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},
				app_id: '',
				show: true,
			}
		},
		onLoad() {
			// this.get111()
		},
		onPullDownRefresh() { //下拉刷新
			// 先让数据为空
			this.item = []
			this.get111()
		},
		onShow() {
			this.get111()
		},
		methods: {
			get111() {
				uni.showLoading({
					title: '正在加载...'
				})
				this.$http(this.$api.applic).then(res => {
					this.list = res.data.list
					this.total = res.data.total
					uni.hideLoading()
					uni.showToast({
						title: "刷新成功",
						icon: 'none',
						duration: 800
					})
					uni.stopPullDownRefresh()
				})
			},
			goPage(items) {
				// console.log(items.id, '分区页面id');
				if (items.id === 2) {
					uni.navigateTo({
						url: `/pages/application/approvalList?id=${items.id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/application/businessSq?id=${items.id}&title=${items.title}`
					})
				}
			},
		}
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.empty {
		margin-top: 200rpx;
	}

	.content {
		padding: 10px;
		font-size: 14px;
	}

	.content_box {
		box-shadow: 0px 0px 6px #DCDCDC;
		border-radius: 5px;
		padding: 10px;
	}

	.padding text {
		vertical-align: middle;
		padding-left: 5px;
		color: #ccc;
	}

	.img {
		height: 15px;
		width: 15px;
		vertical-align: middle;
	}

	.img2 {
		height: 50%;
		width: 40%;
		padding-top: 30rpx;
	}

	.ywsp {
		border-bottom: 1px solid #ccc;
		padding-top: 15px;
		margin: 0 10px;
		position: relative;
	}

	.ywsp:last-child {
		border-bottom: none;
	}

	.ywsp_box {
		width: 27%;
		height: 177rpx;
		text-align: center;
		margin: 15px 0;
		margin-right: 10px;
		position: relative;

	}

	.flex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

	}

	.badge {
		background-color: red;
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		position: absolute;
		right: -7px;
		top: -7px;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
	}
</style>
